﻿<!DOCTYPE HTML>
<html>
<head>
<title>腾讯产品经理：怎么“设计”才符合用户体验_响应式网络软件科技公司织梦模板(自适应手机端)</title>
<meta name="keywords" content="用户体验思想, 腾讯产品经" />
<meta name="description" content="第一部分：「用户体验」其实关于用户体验的定义，虽然有一个国际标准（ISO 9241-210），但是我觉得它的描述过于“散”，过于学术化。所以在网上翻来翻去，我决定使用这个定义：用" />
<meta name="renderer" content="webkit">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="generator" content="DEDECMS  5.7"  data-variable="/muban/M1156008/328/,cn,110,55,2,M1156008" />
<link rel="stylesheet" href="/skin/css/aitecms.css">
<link rel="stylesheet" href="/skin/css/font-awesome.min.css">
<!--[if IE 9]>
<link rel="stylesheet" href="/skin/css/aitecms-ie9-1.css">
<link rel="stylesheet" href="/skin/css/aitecms-ie9-2.css">
<link rel="stylesheet" href="/skin/css/aitecms-ie9-3.css">
<link rel="stylesheet" href="/skin/css/aitecms-ie9-4.css">
<![endif]-->
<!--[if lt IE 10]>
<script src="/skin/js/media.match.min.js"></script>
<script src="/skin/js/respond.min.js"></script>
<script src="/skin/js/classlist.min.js"></script>
<![endif]-->

</head>

<body class="active">
<header role="heading" class="active"> <div class="head-box">
  <div class="head-top">
    <div class="logo-box"> <a href="/" title="广州某某网络设计公司"> <img src="/skin/images/1480412957.png" title="广州某某网络设计公司" alt="广州某某网络设计公司"> </a> </div>
    <div class="jodo-box">
      <p><img src="/skin/images/weixin.jpg" alt="扫一扫微信二维码"/></p>
      <p>扫一扫微信二维码 <em class="fa fa-mobile-phone"></em></p>
    </div>
  </div>
  <div class="nav-cut">
    <ul>
      <li ><a href="/" title="精彩首页">精彩首页</a></li>
      <li class=""> <a href="/a/xinwenzixun/"  title="新闻资讯" data-alert="全部">新闻资讯</a>
        <ul>
          
          <li class="nav2"><a href="/a/xinwenzixun/gongsixinwen/" data-alert="全部">公司新闻</a></li>
          
          <li class="nav2"><a href="/a/xinwenzixun/xingyexinwen/" data-alert="全部">行业新闻</a></li>
          
          <li class="nav2"><a href="/a/xinwenzixun/meitibaodao/" data-alert="全部">媒体报道</a></li>
          
        </ul>
      </li><li class="nav1 active"> <a href="/a/chanpinzhongxin/"  title="产品中心" data-alert="全部">产品中心</a>
        <ul>
          
          <li class="nav2"><a href="/a/chanpinzhongxin/weixinkaifa/" data-alert="全部">高端定制网站</a></li>
          
          <li class="nav2"><a href="/a/chanpinzhongxin/yidongapp/" data-alert="全部">移动网站建设</a></li>
          
          <li class="nav2"><a href="/a/chanpinzhongxin/ruanjianjiemian/" data-alert="全部">业务系统研发</a></li>
          
          <li class="nav2"><a href="/a/chanpinzhongxin/dianzishangwu/" data-alert="全部">服务器运维</a></li>
          
          <li class="nav2"><a href="/a/chanpinzhongxin/app/" data-alert="全部">APP应用程序</a></li>
          
          <li class="nav2"><a href="/a/chanpinzhongxin/ui/" data-alert="全部">UI 美工设计</a></li>
          
        </ul>
      </li><li class=""> <a href="/a/xiangmuanli/"  title="客户案例" data-alert="全部">客户案例</a>
        <ul>
          
          <li class="nav2"><a href="/a/xiangmuanli/anlizhanshi1/" data-alert="全部">案例展示1</a></li>
          
          <li class="nav2"><a href="/a/xiangmuanli/anlizhanshi2/" data-alert="全部">案例展示2</a></li>
          
        </ul>
      </li><li class=""> <a href="/a/fuwuzhongxin/"  title="服务中心" data-alert="全部">服务中心</a>
        <ul>
          
          <li class="nav2"><a href="/a/fuwuzhongxin/changjianwenti/" data-alert="全部">常见问题</a></li>
          
        </ul>
      </li><li class=""> <a href="/a/guanyuwomen/"  title="关于我们" data-alert="全部">关于我们</a>
        <ul>
          
        </ul>
      </li>
      <li class="background"></li>
    </ul>
  </div>
  <div class="head-bottom">
    <div class="foto-box">
      <div class="social-box"> <a href="http://wpa.qq.com/msgrd?v=3&uin=88889999&site=qq&menu=yes" rel="nofollow" target="_blank"> <i class="fa fa-qq"></i> </a> <a href="" rel="nofollow" target="_blank"><i class="fa fa-weibo"></i></a> <a id="met-weixin"><i class="fa fa-weixin"></i></a>
        <div id="met-weixin-content" class="hide">
          <div class="text-center met-weixin-img"><img src="/skin/images/weixin.jpg" /></div>
        </div>
      </div>
      <div class="foto-cut">高端定制，品牌设计</div>
      <div class="powered_by_metinfo"> 品牌网络出品 </div>
    </div>
  </div>
</div>
 </header>
<section role="main" class="subpage active">
  <div class="main-box">
    <div class="banner-content">
      <div class="banner-click"><i class="fa fa-arrows-alt"></i></div>
      <div class="met-banner " data-height="450|350|250">
        <div class="slick-slide"> <img class="cover-image" src="/skin/images/1481290045.jpg" srcset='/skin/images/1481290045.jpg' alt="响应式网络软件科技公司织梦模板(自适应手机端)"> </div>
      </div>
    </div>
    <div class="sidebar-header ">
      <div class="sidebar-icon active"> <i class="fa fa-arrow-left"></i> <i class="fa fa-th-list"></i> </div>
      <div class="sidebar-nav">
        <ol>
          全部
        </ol>
        <ul>
          <li class='active'><a href='/a/chanpinzhongxin/weixinkaifa/' title='高端定制网站' class='active'>高端定制网站</a></li>
          <li><a href="/a/chanpinzhongxin/yidongapp/" title="移动网站建设" class="">移动网站建设</a></li>
          
          <li><a href="/a/chanpinzhongxin/ruanjianjiemian/" title="业务系统研发" class="">业务系统研发</a></li>
          
          <li><a href="/a/chanpinzhongxin/dianzishangwu/" title="服务器运维" class="">服务器运维</a></li>
          
          <li><a href="/a/chanpinzhongxin/app/" title="APP应用程序" class="">APP应用程序</a></li>
          
          <li><a href="/a/chanpinzhongxin/ui/" title="UI 美工设计" class="">UI 美工设计</a></li>
          
        </ul>
      </div>
      <div class="sidebar-search">
        <form  name="formsearch" action="/plus/search.php">
          <input type="hidden" name="kwtype" value="0" />
          <input type="input" name="q" class="searchword" placeholder="search" />
          <input type="submit" class="hidden" value=" " />
          <i class="fa fa-search"></i>
        </form>
      </div>
    </div>
    <div class="product-title" style="margin-top:80px;">高端定制网站</div>
    <div class="product-descript">
      <h3>腾讯产品经理：怎么“设计”才符合用户体验</h3>
      <font> 阅读 <i class="fa fa-eye"></i> 
      <script src="/plus/count.php?view=yes&aid=83&mid=1" type='text/javascript' language="javascript"></script> 
      &nbsp;·&nbsp; 
      发布日期 <i class="fa fa-clock-o"></i> 2016-09-01 16:29 </font>
      <p>第一部分：「用户体验」其实关于用户体验的定义，虽然有一个国际标准（ISO 9241-210），但是我觉得它的描述过于“散”，过于学术化。所以在网上翻来翻去，我决定使用这个定义：用...</p>
    </div>
    <div class="product-title">详细信息</div>
    <div class="product-content"> <h2>第一部分：「用户体验」</h2>
<p>其实关于用户体验的定义，虽然有一个国际标准（ISO 9241-210），但是我觉得它的描述过于“散”，过于学术化。所以在网上翻来翻去，我决定使用这个定义：</p>
<blockquote><p>用户体验（User Experience，简称UX）是一种在用户使用产品过程中建立起来的纯主观感受。</p>
<p>这个定义中提到了3个关键词，分别是「用户」、「过程中」和「主观感受」。我以为，这3个关键词构成了用户体验的灵魂。我们来一一分析。</p></blockquote>
<p><strong>用户</strong></p>
<p>「用户」意味着，对于不同的目标用户来说，「好的用户体验」的定义是不同的。所以如果脱离了用户，是无法评价一个产品的用户体验的。</p>
<p>可能很多朋友都认为我们应该将产品做得尽量的“简单”，最好是用户不需要学习就能“自然的”使用。这个原则可能对于大部分面向大众的产品来说，是对的。但是在另外一些情况下，就不一定了。比如说：美图秀秀和Photoshop都可以处理图片，但是它们的用户体验哪个好，哪个不好呢？这事儿我看还真不能简单的下结论。</p>
<p><a href="/uploads/allimg/c160901/14HGU4342440-12460.png"><img class="aligncenter size-full wp-image-2922" src="/uploads/allimg/c160901/14HGU4342440-12460.png" alt="GR" width="1000" height="509" srcset="/uploads/allimg/c160901/14HGU4342440-12460.png 1000w, http://www.yzipi.com/wp-content/uploads/2015/11/GR-400x204.png 400w, http://www.yzipi.com/wp-content/uploads/2015/11/GR-600x305.png 600w" sizes="(max-width: 1000px) 100vw, 1000px" /></a></p>
<p>美图秀秀的目标用户，可能是一些妹纸们。她们的一个典型用户场景，是用手机自拍，希望把自己变得更“美”一些，然后发到朋友圈上面去。大部分妹纸估计并没学过设计或者美术，可能也不太懂摄影，但是美图秀秀可以让妹纸们只通过简单的点按、选择，就能把自己的照片变美。不需要过多的思考，不需要专业知识，所以，在这个场景中，它的「用户体验」是好的。</p>
<p>但Photoshop的目标用户，估计并不是这些妹纸们，而是专业的设计师。对于一个专业的设计师来说，他用Photoshop工作，这时「能够最大限度的帮助设计师表达他们的创意」才是好的用户体验。为了做到这一点，专业的设计师并不介意去深入的学习这个软件的使用方法。从“易用性”来看，Photoshop显然不够易用，但对于专业设计师来说，它的体验太棒了！</p>
<p><strong><span style="color: #000000;">过种中</span></strong></p>
<p>「过程中」告诉我们，在设计用户体验的时候，需要考虑用户所处的环境和使用场景。</p>
<p>我们使用电脑时的环境大部分是相对稳定的环境，例如办公室、家里、咖啡馆等等。但是使用手机的环境就不一定了，有可能在地铁车厢中、电梯中、旅行路上，这样意味着，使用手机的时候可能会伴随晃动、光线变化、网络不稳定等等因素。所以在做具体设计的时候，这两边会有一些区别。</p>
<p>在不同的环境和用户场景下，需要不同的功能来支撑「好的体验」</p>
<p>例如：在很多阅读类的应用中，都会提供“夜间模式”功能。如果你睡觉前，躺在被窝里，关了周围的灯，那平时常见的黑底白字的屏幕可能会变得很刺眼，这时将背景换成深色，调低文字与背景的对比度，在黑暗中能够帮助你更好的阅读。所以这时“看不清”的文字用户体验反而是好的。</p>
<p><strong><span style="color: #000000;">主观感受</span></strong></p>
<p>「主观感受」提示我们，不要浮于表面。一个优秀的产品经理或者设计师，一定会倾听用户的反馈，但绝不会被用户牵着走。他们需要去挖掘用户主观感受背后真正的需求。</p>
<p>据说，福特汽车公司的创始人亨利•福特说过一句话：“If I had to ask customers what they want, they will tell me: a faster horse.”在网络上，曾经有很多人讨论过这句话，特别是《乔布斯传》出版后，很多人以此为论据试图证明用户研究是没用的，产品设计者主观的“感觉”才是关键。</p>
<p>我并不反对“感觉”的重要性，但是其实我们只要对这句话稍作分析就能看出，福特的客户其实已经清晰的表达出了他们的需求，只不过，并不是“horse”，而是“faster”。而汽车最终超越了它的竞品——马，其中一个重要的因素也的确是faster。所以在速度这一点上面，汽车的用户体验是好的。但是否就能说明，马的用户体验不好呢？当然不是，如果到了没有公路崎岖不平的地方，即便还是比速度，十有八九还是马更强一些。</p>
<h2>第一部分：「设计」</h2>
<p>大部分时候，我们在公司内部所说的设计，指的是狭义的设计，偏重于“表现层”的设计。互联网公司里面的各种“用户体验设计团队”负责的大部分是界面层面的设计。但是，界面能代表「用户体验」吗？</p>
<p>其实在我的理解中，「设计」这两个字所涵盖的范围是很大的，甚至夸张点儿，可以这样讲：人类所从事的全部工作，拆分出来一共就只有2件事情，一个叫「设计」，另一个叫「工程」。去思考，要做什么，要怎么做，叫设计；去做，叫工程。并且在现代社会，大部分的工作其实是包含这两者的，只是谁多谁少而已。</p>
<p>回到互联网产品上来，我以前曾经总结过，影响互联网产品用户体验的主要有4个因素，这些因素其实都是需要设计的，这其中任何一个“设计”不合理，结论都是“用户体验不好”。它们分别是：产品策略、用户界面、技术、运营。</p>
<p><a href="/uploads/allimg/c160901/14HGU4412K0-22033.png"><img class="aligncenter size-full wp-image-2914" src="/uploads/allimg/c160901/14HGU4412K0-22033.png" alt="0e262938f1823c1194a49eb9a7007100" width="600" height="350" srcset="/uploads/allimg/c160901/14HGU4412K0-22033.png 600w, http://www.yzipi.com/wp-content/uploads/2015/11/0e262938f1823c1194a49eb9a7007100-400x233.png 400w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>所以从这个角度来看，「用户体验部」的设计师能够cover到的，其实仅仅是「用户界面」这一个环节而已。而所谓的「设计」，则是有着更加广阔的延伸。</p>
<p><strong><span style="color: #000000;">设计原则概览</span></strong></p>
<p>我们还是把关注的焦点从“哲学”的层面，拉回到具体的产品设计上吧。任何领域，一定都会有一些基础原则作为这个领域里面的方法论，这些原则往往是前人经过大量的分析和实践得出的，一般情况下，后人可以直接使用。我挑选了一些我认为常用的设计原则与大家分享。</p>
<p><strong><span style="color: #ff6600;">原则1：符合用户使用需求</span></strong></p>
<p>是的，一般的基础原则，讲出来都像是废话。设计一个产品，最基础的原则就是要符合用户的使用需求。上文提到的福特，就是成功的在“速度”这个关键点上，设计出了符合用户需求的产品，提升了用户体验，于是大获成功。确定需求是一个产品经理的基本工作内容，有很多方法和工具可以帮助我们找到用户的需求。例如观察用户行为、分析数据、构建用户场景等等。由于这篇文章是从用户体验的角度切入，所以在这个原则中，我们来讨论这样一个问题：你觉得12306这个服务的用户体验如何？</p>
<p>听起来好像又是一句废话。我们翻一翻网上的各种评论就知道，大家对于12306基本上是骂声一片的。例如，在知乎上面就有一个类似的问题：</p>
<p><a href="/uploads/allimg/c160901/14HGU4444D0-3GT.png"><img class="aligncenter size-full wp-image-2915" src="/uploads/allimg/c160901/14HGU4444D0-3GT.png" alt="ik" width="320" height="567" /></a></p>
<p>如你所料，一片骂声，甚至当年还有人说你们这些做“用户体验”的，做“设计”的，P用没有，你看人家12306，“设计”得那么烂，PVUV流量不照样是全国领先，所以“用户体验”没用。我觉得说这话的人，一方面是冤枉我们这些“做设计”的人了，另一方面，只能说，您对“用户体验”的理解还不够。如果把12306看做一个互联网产品，它的体验真的是烂到极点了。交互流程混乱、UI难看、服务不稳定等等。但是请注意，我的问题是“12306这个「服务」的用户体验如何”。从服务的角度看，12306是一个帮你买火车票的东西。我们想一下在没有12306的时候，我们买火车票的体验是怎样的呢？那年我在北京，零下20多度的气温，为了买到过年回家的火车票，我需要凌晨4点半起床，搭最早一班2号线地铁到北京站；需要排3个小时的队，有时候还是在室外排；但你会发现总是会有1到2个人排在你前面，好不容易开始卖票了，他们会天南海北买一堆车票。虽然你排第二，但是轮到你的时候，卧铺票保证已经卖光了。</p>
<p>但是现在有了12306，你依然只是「有可能」在上面买到票而已，但是至少我觉得，概率并不低于去车站排队。在这个前提下，你可以放票的时候再起床，可以坐在温暖的家里，可以一边喝咖啡一边点鼠标。平心而论，对于买票这个需求来说，12306的体验比去火车站好太多了。</p>
<p>从产品策划角度，我把一个产品的「体验」分为3个层级，分别是「有用」、「可用」、「易用」。</p>
<p><a href="/uploads/allimg/c160901/14HGU4494160-44538.jpg"><img class="aligncenter size-full wp-image-2916" src="/uploads/allimg/c160901/14HGU4494160-44538.jpg" alt="f" width="600" height="292" srcset="/uploads/allimg/c160901/14HGU4494160-44538.jpg 600w, http://www.yzipi.com/wp-content/uploads/2015/11/f-400x195.jpg 400w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>而12306这货，在「有用」这个层级上是要等于或优于排队的，虽然在「可用」和「易用」两个层级做得很差，但综合起来，其「用户体验」还是要优于其“竞品”——去火车站排队。</p>
<p><strong><span style="color: #ff6600;">原则2：基于用户的心理模型设计</span></strong></p>
<p>这个原则听起来有点儿抽象，但如果我在后面加上后半句，理解起来就会容易一些：基于用户的心理模型设计，而不是基于业务或者工程模型，更加不是基于你自己的想法。</p>
<p>我们来研究这样一个用户场景：假设我的房东给我发短信，催我交房租，内容如下：</p>
<p>harry啊，该交房租了啊。把钱汇到我的银行账户吧。建设银行，622600000001123，户名：房东</p>
<p>这条短信中，核心信息有3个，银行名称、账号和户名。于是我打开某银行的手机app，点击了一个叫“转账汇款”的入口后，看到了这样一个界面：</p>
<p><a href="/uploads/allimg/c160901/14HGU45194F-5a23.jpg"><img class="aligncenter size-full wp-image-2917" src="/uploads/allimg/c160901/14HGU45194F-5a23.jpg" alt="uuy" width="320" height="568" /></a></p>
<p>这是一个典型的基于业务模型，而不是用户的心理模型来设计的功能。行内转账、跨行转账我还能理解，但是不免想到，如果只给我一个框，选择对方的银行名称，难道app本身还没办法判断是“行内”还是“跨行”吗？第三项叫“跨行转入”… 听起来好像是我会收到钱，它为什么会出现在“转账汇款”里面呢？好奇怪。后面，“手机号转账”和“一键转账”又是什么东西？如果我想使用这两个功能需要另外开通吗？另外“手机号转账”，听起来好像是不需要知道对方的账号，知道对方的手机号就能转账？是这个意思吗？但是如果对方没开通这个服务，会怎样？我的钱会不会丢？万一有两个人在银行使用了同一个手机号，我的钱到底会汇到哪儿去呢？</p>
<p>如果对于一个像我一样，至少还上过几年学，自己本身在做互联网，并且其实每个月都要用相同方式交房租的人来说，看到这些都会糊涂的话，那如果对方是一个不懂互联网，不懂金融的普通用户呢？简直是灾难。</p>
<p>但相比之下，我们看看互联网公司做的产品，就很不一样了。下图是支付宝的“转账汇款”界面：</p>
<p><a href="/uploads/allimg/c160901/14HGU4550460-B2C.jpg"><img class="aligncenter size-full wp-image-2918" src="/uploads/allimg/c160901/14HGU4550460-B2C.jpg" alt="t" width="320" height="568" /></a></p>
<p>这个界面上，只有卡号、银行、姓名和金额4个必填项目，与房东提供的信息高度重合，完全符合用户的心理模型。作为普通用户，几乎完全不需要思考，即可使用了。（虽然展示的是界面，但实际上我们并不是在讨论界面本身，而是其背后的设计思想）</p> </div>
    <div class="page-main">
      <ul class="pager pager-round">
        <li class="previous"> <span></span><a href='/a/chanpinzhongxin/weixinkaifa/81.html'>上一篇：画像，场景，数据三招打造极致的用户思维</a>  </li>
        <li class="next "> <span></span><a href='/a/chanpinzhongxin/weixinkaifa/85.html'>下一篇：互联网产品运营中获取&#8221;用户需求&#8221;的五大</a>  </li>
      </ul>
    </div>
    <button type="button" class="btn btn-icon btn-primary btn-squared met-scroll-top hide"> <i class="icon wb-chevron-up" aria-hidden="true"></i> </button>
    <script src="/skin/js/aitecms.js"></script> 
  </div>
  <footer >
    <p>Copyright &copy; 2016-2017 某某网络设计公司 版权所有 <a href="http://www.dede58.com" target="_blank">Power by DeDe58</a> </p>
  </footer>
</section>
</body>
</html>